<div class="span4 visconfig">
    <div class="vis-options" id="{{vis['svelte-sidebar']}}"></div>
</div>

<script type="text/javascript" src="/static/plugins/{{ vis['__plugin'] }}/controls.js"></script>
<link rel="stylesheet" type="text/css" href="/static/plugins/{{ vis['__plugin'] }}/controls.css">
<link rel="stylesheet" type="text/css" href="/static/css/svelte/controls.css">
<script type="text/javascript">

require(['{{ vis['svelte-sidebar'] }}'], function(controls) {

    controls.globals.set({
        dw_chart: chart,
        language: '{{language}}',
        theme: { colors: { palette: [] }, fake: true }
    });

    controls.globals.compute('visMeta', ['visMetas'], function(visMetas) {
        var vis = window.chart.get('type');
        return visMetas && vis ? visMetas[vis] || null : null;
    });

    var current = chart.get('metadata.visualize', {});

    var app = new controls.App({
        store: controls.globals,
        target: document.querySelector('#{{vis['svelte-sidebar']}}')
    });

    window.dw.backend
        .on('vis-metas', function(visMetas) {
            app.store.set({
                visMetas: visMetas,
                theme: window.dw.theme(chart.get('theme'))
            });
        })
        .on('dataset-loaded', function() {
            app.store.set({dataset: chart.dataset()});
        })
        .on('theme-changed-and-loaded', function() {
            app.store.set({theme: window.dw.theme(chart.get('theme')) });
        })
        .on('backend-vis-loaded', function(vis) { app.store.set({vis: vis}); })
        .on('axes-changed', function() {
            setTimeout(function() {
                app.store.set(app.store.get());
            }, 1000);
        });

    // extend data with default
    app.set({ value: _.extend({}, app.get('default') || {}, current) });
})
</script>
